import React, { useEffect, useRef, useState } from 'react'
import { Button, Dropdown, Space } from 'antd';
import { FixedSizeList as List } from 'react-window';
import '../../style/kuangjia.css'
const genalSonglist = () => {
  const ulRef = useRef(null)
  const formatDuration = (duration) => {
    const minutes = Math.floor(duration / 60000);
    const seconds = ((duration % 60000) / 1000).toFixed(0);
    return (minutes < 10 ? '0' : '') + minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
  };

  const [songLists, setSongLists] = useState([])
  useEffect(() => {
    fetch('http://localhost:8088/favor')
      .then((response) => response.json())
      .then((data) => {
        setSongLists(data.data)
      })
      .catch((error) => {
        console.error('Error fetching song data:', error);
      })
  }, [])


  const items = () => [
    {
      key: '1',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
          收藏
        </a>
      ),
    },
    {
      key: '2',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
          下载
        </a>
      ),
    },
    {
      key: '3',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
          添加到歌单
        </a>
      ),
    },
    {
      key: '4',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
          添加到播放
        </a>
      ),
    },
  ];
  const renderRow = ({ index, style }) => {
    const item = songLists[index]
    return (
      <li key={index} style={style}>
        <div className="hideicon">
          <i className="ri-play-fill"></i>
        </div>
        <div className="search_songlist_left">
          <div className="song_information">
            <img
              src={item.coverUrl}
              alt={item.musicName}
            />
            <div className="song_name">
              <span id="songname">{item.musicName}</span>
              <span id="singer">{item.artName}</span>
            </div>
          </div>
          <div className="dowhat">
            <i
              className="ri-heart-3-fill"
            ></i>
            <div className='menu'>
              <Space direction="vertical">
                <Space wrap>
                  <Dropdown
                    menu={{
                      items: items(), // 动态传入当前歌曲的 ID
                    }}
                    placement="topLeft"
                    trigger={['click']}
                  >
                    <i className="ri-menu-4-line"></i>
                  </Dropdown>
                </Space>
              </Space>
            </div>
          </div>
        </div>
        <div className="search_songlist_right">
          <div id="songalbum">{item.album}</div>
          <div id="songduration">{formatDuration(item.dt)}</div>
        </div>
      </li>
    )
  }
  return (
    <div className="search_songlist">
      <div className="serch_nav">
        <div>歌名/歌手</div>
        <div className="serch_nav_right">
          <div>专辑</div>
          <div>时长</div>
        </div>
      </div>
      <ul className='lisMain2' ref={ulRef}>
        <List
          height={ulRef.current ? (ulRef.current.clientHeight + 100) : 0}
          width="100%"
          itemCount={songLists.length}
          itemSize={50}
        >
          {renderRow}
        </List>
      </ul>
    </div>

  )
}

export default genalSonglist